<template>
  <div class="jiben">
        <div>
            <el-row style="margin-bottom:10px">
                <el-col :span="8">
                <el-radio style="line-height:40px;" v-model="radio" label="1">行政区划：</el-radio>
                </el-col>
                <el-col :span="16">
                    <el-autocomplete
                        class="inline-input"
                        v-model="state1"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleXingZhengSelect"    
                    ></el-autocomplete>
                </el-col>
            </el-row>
            <el-row style="margin-bottom:10px">
                <el-col :span="8">
                    <el-radio  style="line-height:40px;" v-model="radio"   label="2">点位周边：</el-radio>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="inputKm" ></el-input>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:40px;">千米</div>
                </el-col>
                <el-col :span="4">
                    <el-button style="width:35px;padding:10px 0;" type="primary" @click="getCenter">点选</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-bottom:10px">
                <el-col :span="8">
                    <el-radio style="line-height:40px;" v-model="radio" label="3">自定义区域：</el-radio>
                </el-col>
                <el-col :span="5">
                    <el-button icon="el-icon-folder"></el-button>
                </el-col>
                <el-col :span="5">
                    <el-button icon="el-icon-stopwatch"></el-button>
                </el-col>
                <el-col :span="5">
                    <el-button icon="el-icon-house"></el-button>
                </el-col>
            </el-row>
            <div>
                <el-checkbox class="fontWeight" :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">敏感目标</el-checkbox>
                <el-row>
                    <el-checkbox-group v-model="checkedmubiao" @change="handleCheckedmubiaoChange">
                        <el-col :span="24" class="groups">
                            <el-checkbox v-for="city in mubiaos" :label="city" :key="city" v-model="checked1" @change="mubiaoChange">
                                <img class="fontImg" :src="mubiaoPic[city]" alt="">
                                {{city}}
                            </el-checkbox>
                        </el-col>
                    </el-checkbox-group>
                </el-row>
            </div>
            <div>
                <el-checkbox class="fontWeight" :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">风险源</el-checkbox>
                <el-row >
                    <el-checkbox-group v-model="checkedfengxian" @change="handleCheckedfengxianChange">
                        <el-col :span="24" class="groups">
                            <el-checkbox  v-for="city in fengxians" :label="city" :key="city"  @change="fengxianChange">
                                <img class="fontImg" :src="fengxianPic[city]" alt="">
                                {{city}}</el-checkbox>
                        </el-col>
                    </el-checkbox-group>
                </el-row>
            </div>
            <div>
                
                <el-checkbox  class="fontWeight"  :indeterminate="isIndeterminate3" v-model="checkAll3" @change="handleCheckAllChange3">应急预案</el-checkbox>
                <el-row >
                    <el-checkbox-group  v-model="checkedyingji" @change="handleCheckedyingjiChange">
                        <el-col :span="24" class="groups">
                            <el-checkbox v-for="city in yingjis" :label="city" :key="city" @change="yingjiChange">
                                <img class="fontImg" :src="yingjiPic[city]" alt="">
                                {{city}}</el-checkbox>
                        </el-col>
                    </el-checkbox-group>
                </el-row>
            </div>
            <div>
                <el-checkbox  class="fontWeight"  :indeterminate="isIndeterminate4" v-model="checkAll4" @change="handleCheckAllChange4">环境质量监测</el-checkbox>
                <el-row >
                    <el-checkbox-group  v-model="checkedhuanjing" @change="handleCheckedhuanjingChange">
                        <el-col :span="24" class="groups">
                            <el-checkbox v-for="city in huanjings" :label="city" :key="city" @change="huanjingChange">
                                <img class="fontImg" :src="huanjingPic[city]" alt="">
                                {{city}}</el-checkbox>
                        </el-col>
                    </el-checkbox-group>
                </el-row>
            </div>
            <div>
                <el-checkbox  class="fontWeight"  :indeterminate="isIndeterminate5" v-model="checkAll5" @change="handleCheckAllChange5">应急物资</el-checkbox>
                <el-row >
                <el-checkbox-group v-model="checkedyingjiwu" @change="handleCheckedyingjiwuChange">
                    <el-col :span="24" class="groups">
                        <el-checkbox v-for="city in yingjiwus" :label="city" :key="city" @change="yingjiwuChange">
                            <img class="fontImg" :src="yingjiwuPic[city]" alt="">
                            {{city}}</el-checkbox>
                    </el-col>
                </el-checkbox-group>
                </el-row >
            </div>
            <div>
                <el-checkbox  class="fontWeight"  :indeterminate="isIndeterminate6" v-model="checkAll6" @change="handleCheckAllChange6">水文气象</el-checkbox>
                <el-row >
                    <el-checkbox-group v-model="checkedshuiwen" @change="handleCheckedshuiwenChange">
                        <el-col :span="24" class="groups">
                            <el-checkbox v-for="city in shuiwens" :label="city" :key="city" @change="shuiwenChange">
                                <img class="fontImg" :src="shuiwenPic[city]" alt="">
                                {{city}}</el-checkbox>
                        </el-col>
                    </el-checkbox-group>
                </el-row >
            </div>
            <div>
                <el-checkbox  class="fontWeight"  :indeterminate="isIndeterminate7" v-model="checkAll7" @change="handleCheckAllChange7">环保举报</el-checkbox>
                <el-row >
                    <el-checkbox-group v-model="checkedhuanbao" @change="handleCheckedhuanbaoChange">
                        <el-col :span="24" class="groups">
                            <el-checkbox v-for="city in huanbaos" :label="city" :key="city"  @change="huanbaoChange">
                                <img class="fontImg" :src="huanbaoPic[city]" alt="">
                                {{city}}</el-checkbox>
                        </el-col>
                    </el-checkbox-group>
                </el-row >
            </div>
        </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations ,mapActions} from 'vuex'
import axios from "axios"
const allPositions = [
    [128.528976,47.398068],[128.475382,47.365975],[128.494137,47.31921],[128.5491,47.296886],[128.585931,47.305856],
    [128.615511,47.334302],[128.592348,47.362979],[128.554797,47.372732],[128.560143,47.345311],[128.581995,47.314622],
    [128.528396,47.308563],[128.438253,47.308963],[128.463214,47.346125],[128.462695,47.398021],[128.608728,47.408421],
    [128.628386,47.320707],[128.537741,47.269506],[128.526904,47.319731],[128.631608,47.361978],[128.551949,47.371968],[128.529783,47.246524]
];
const mubiaoPositions = { '河流':[], "河流（详细）":[],'水源地':allPositions[0], '湖泊':allPositions[1], '自然保护区':allPositions[2],"学校":allPositions[3],"医院":allPositions[4] };
const fengxianPositions = {'工业风险源':allPositions[5], '尾矿库':allPositions[6], '工业园区':allPositions[7], '排污口':allPositions[8],"污水处理厂":allPositions[9],"危废处理厂":allPositions[10] };
const yingjiPositions = {'企业预案备案':allPositions[11] };
const huanjingPositions = {'空气自动站':allPositions[12], '水质自动站':allPositions[13] };
const yingjiwuPositions = {'物资库':allPositions[14],"生产厂家":allPositions[15] };
const shuiwenPositions = {'河站':allPositions[16], '水库':allPositions[17],"气象站":allPositions[18],"闸坝":allPositions[19] };
const huanbaoPositions = {'环保举报':allPositions[20] };
const allPics = [
    "./data/icon/shui.png",
    "./data/icon/hu.png",
    "./data/icon/bao.png",
    "./data/icon/xue.png",
    "./data/icon/yi.png",
    "./data/icon/xian.png",
    "./data/icon/ku.png",
    "./data/icon/yuan.png",
    "./data/icon/pai.png",
    "./data/icon/wu.png",
    "./data/icon/weixian.png",
    "./data/icon/yu.png",
    "./data/icon/wupan.png",
    "./data/icon/shui.png",
    "./data/icon/wupin.png",
    "./data/icon/chan.png",
    "./data/icon/hu.png",
    "./data/icon/ba.png",
    "./data/icon/chan.png",
    "./data/icon/wupan.png",
    "./data/icon/bao.png",
    "./data/icon/yin.png",
    "./data/icon/xiang.png",
]
const mubiaoPic = {'河流':allPics[0], "河流（详细）":allPics[0],'水源地':allPics[21],'湖泊':allPics[1],'自然保护区':allPics[2],"学校":allPics[3],"医院":allPics[4] }
const fengxianPic = {'工业风险源':allPics[5], '尾矿库':allPics[6], '工业园区':allPics[7], '排污口':allPics[8],"污水处理厂":allPics[9],"危废处理厂":allPics[10] };
const yingjiPic = {'企业预案备案':allPics[11] };
const huanjingPic = {'空气自动站':allPics[12], '水质自动站':allPics[13] };
const yingjiwuPic= {'物资库':allPics[14],"生产厂家":allPics[15] };
const shuiwenPic = {'河站':allPics[0], '水库':allPics[0],"气象站":allPics[22],"闸坝":allPics[17] };
const huanbaoPic = {'环保举报':allPics[20] };




const mubiaoOptions = ['河流', "河流（详细）",'水源地', '湖泊', '自然保护区',"学校","医院"];
const fengxianOptions = ['工业风险源', '尾矿库', '工业园区', '排污口',"污水处理厂","危废处理厂"];
const yingjiOptions = ['企业预案备案'];
const huanjingOptions = ['空气自动站', '水质自动站'];
const yingjiwuOptions = ['物资库',"生产厂家"];
const shuiwenOptions = ['河站', '水库',"气象站","闸坝"];
const huanbaoOptions = ['环保举报'];

export default {
    data() {
        return {
            mubiaoPic :{'河流':allPics[0], "河流（详细）":allPics[0],'水源地':allPics[21],'湖泊':allPics[1],'自然保护区':allPics[2],"学校":allPics[3],"医院":allPics[4] },
            fengxianPic :{'工业风险源':allPics[5], '尾矿库':allPics[6], '工业园区':allPics[7], '排污口':allPics[8],"污水处理厂":allPics[9],"危废处理厂":allPics[10] },
            yingjiPic :{'企业预案备案':allPics[11] },
            huanjingPic :{'空气自动站':allPics[12], '水质自动站':allPics[13] },
            yingjiwuPic:{'物资库':allPics[14],"生产厂家":allPics[15] },
            shuiwenPic :{'河站':allPics[0], '水库':allPics[0],"气象站":allPics[22],"闸坝":allPics[17] },
            huanbaoPic :{'环保举报':allPics[20] },
            checked1:false,
            activeName: 'first',
            radio: '1',
            state1: '',
            restaurants:[
            { "value": "北京市市辖区东城区", "address": "长宁区新渔路144号" },],
            inputKm:5,
            checkAll1: false,
            checkAll2: false,
            checkAll3: false,
            checkAll4: false,
            checkAll5: false,
            checkAll6: false,
            checkAll7: false,
            isIndeterminate1:true,
            isIndeterminate2:true,
            isIndeterminate3:true,
            isIndeterminate4:true,
            isIndeterminate5:true,
            isIndeterminate6:true,
            isIndeterminate7:true,
            checkedmubiao: [],
            checkedfengxian: [],
            checkedyingji: [],
            checkedhuanjing: [],
            checkedyingjiwu: [],
            checkedshuiwen: [],
            checkedhuanbao: [],
            mubiaos: mubiaoOptions,
            fengxians: fengxianOptions,
            yingjis: yingjiOptions,
            huanjings: huanjingOptions,
            yingjiwus: yingjiwuOptions,
            shuiwens: shuiwenOptions,
            huanbaos: huanbaoOptions,
            isIndeterminate: true
        }
    },
    methods: {
        ...mapMutations("windowInfo", { changeInfoBoxContent: "changeInfoBoxContent",changeTabName:"changeTabName" }),
        handleClick(tab, event) {
            console.log(tab, event);
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        handleCheckAllChange1(val) {
            this.checkedmubiao = val ? mubiaoOptions : [];
            this.isIndeterminate1 = false;
            if(val){
                for(let name in mubiaoPositions){
                    if(mubiaoPositions[name].length>0){
                        this.$cp.addBillboard( "mubaio" + name , mubiaoPositions[name], mubiaoPic[name], name , "moveMove", this.entityLeftClick) 
                    }
                }
            }else{
                for(let name in mubiaoPositions){
                    viewer.entities.removeById("mubaio" + name)
                }
            }
        },
        handleCheckAllChange2(val) {
            this.checkedfengxian = val ? fengxianOptions : [];
            this.isIndeterminate2 = false;
            if(val){
                for(let name in fengxianPositions){
                    if(fengxianPositions[name].length>0){
                        this.$cp.addBillboard( "fengxian" + name , fengxianPositions[name], fengxianPic[name], name , "moveMove", this.entityLeftClick) 
                    }
                }
            }else{
                for(let name in fengxianPositions){
                    viewer.entities.removeById("fengxian" + name)
                }
            }
        },
        handleCheckAllChange3(val) {
            this.checkedyingji = val ? yingjiOptions : [];
            this.isIndeterminate3 = false;
            if(val){
                for(let name in yingjiPositions){
                    if(yingjiPositions[name].length>0){
                        this.$cp.addBillboard( "yingji" + name , yingjiPositions[name], yingjiPic[name], name , "moveMove", this.entityLeftClick) 
                    }
                }
            }else{
                for(let name in yingjiPositions){
                    viewer.entities.removeById("yingji" + name)
                }
            }
        },
        handleCheckAllChange4(val) {
            this.checkedhuanjing = val ? huanjingOptions : [];
            this.isIndeterminate4 = false;
            if(val){
                for(let name in huanjingPositions){
                    if(huanjingPositions[name].length>0){
                        this.$cp.addBillboard( "huanjing" + name , huanjingPositions[name], huanjingPic[name], name , "moveMove", this.entityLeftClick) 
                    }
                }
            }else{
                for(let name in huanjingPositions){
                    viewer.entities.removeById("huanjing" + name)
                }
            }
        },
        handleCheckAllChange5(val) {
            this.checkedyingjiwu = val ? yingjiwuOptions : [];
            this.isIndeterminate5 = false;
            if(val){
                for(let name in yingjiwuPositions){
                    if(yingjiwuPositions[name].length>0){
                        this.$cp.addBillboard( "yingjiwu" + name , yingjiwuPositions[name], yingjiwuPic[name], name , "moveMove", this.entityLeftClick) 
                    }
                }
            }else{
                for(let name in yingjiwuPositions){
                    viewer.entities.removeById("yingjiwu" + name)
                }
            }
        },
        handleCheckAllChange6(val) {
            this.checkedshuiwen = val ? shuiwenOptions : [];
            this.isIndeterminate6 = false;
            if(val){
                for(let name in shuiwenPositions){
                    if(shuiwenPositions[name].length>0){
                        this.$cp.addBillboard( "shuiwen" + name , shuiwenPositions[name], shuiwenPic[name], name , "moveMove", this.entityLeftClick) 
                    }
                }
            }else{
                for(let name in shuiwenPositions){
                    viewer.entities.removeById("shuiwen" + name)
                }
            }
        },
        handleCheckAllChange7(val) {
            this.checkedhuanbao = val ? huanbaoOptions : [];
            this.isIndeterminate7 = false;
            if(val){
                for(let name in huanbaoPositions){
                    if(huanbaoPositions[name].length>0){
                        this.$cp.addBillboard( "huanbao" + name , huanbaoPositions[name], huanbaoPic[name], name , "moveMove", this.entityLeftClick) 
                    }
                }
            }else{
                for(let name in huanbaoPositions){
                    viewer.entities.removeById("huanbao" + name)
                }
            }
        },
        handleCheckedmubiaoChange(value) {
            let checkedCount = value.length;
            this.checkAll1 = checkedCount === this.mubiaos.length;
            this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.mubiaos.length;
            // value.forEach((item)=>{
            //     this.$cp.addBillboard( "mubaio" + item , mubiaoPositions[item], "./data/blue.png" , "item", "leftClick", this.entityLeftClick) 
            //     console.log(mubiaoPositions[item])
            // })
        },
        handleCheckedfengxianChange(value) {
            let checkedCount = value.length;
            this.checkAll2 = checkedCount === this.fengxians.length;
            this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.fengxians.length;
            fengxianPositions
        },
        handleCheckedyingjiChange(value) {
            let checkedCount = value.length;
            this.checkAll3 = checkedCount === this.yingjis.length;
            this.isIndeterminate3 = checkedCount > 0 && checkedCount < this.yingjis.length;
             yingjiPositions 
        },
        handleCheckedhuanjingChange(value) {
            let checkedCount = value.length;
            this.checkAll4 = checkedCount === this.huanjings.length;
            this.isIndeterminate4 = checkedCount > 0 && checkedCount < this.huanjings.length;
            huanjingPositions
        },
        handleCheckedyingjiwuChange(value) {
            let checkedCount = value.length;
            this.checkAll5 = checkedCount === this.yingjiwus.length;
            this.isIndeterminate5 = checkedCount > 0 && checkedCount < this.yingjiwus.length;
             yingjiwuPositions 
        },
        handleCheckedshuiwenChange(value) {
            let checkedCount = value.length;
            this.checkAll6 = checkedCount === this.shuiwens.length;
            this.isIndeterminate6 = checkedCount > 0 && checkedCount < this.shuiwens.length;
        },
        handleCheckedhuanbaoChange(value) {
            let checkedCount = value.length;
            this.checkAll7 = checkedCount === this.huanbaos.length;
            this.isIndeterminate7 = checkedCount > 0 && checkedCount < this.huanbaos.length;
        },
        openCenter() {
            this.$message({
                message: '搜索出1条数据',
                center: true,
                duration:1000,
                offset:100
            });
        },
        mubiaoChange(checked,city){
            const name = city.target.value;
            if(checked){
                if(name=="河流"||name=="河流（详细）"){
                    this.$message({
                        message: '搜索出0条数据',
                        center: true,
                        offset:100
                    });
                }else{
                    this.openCenter()
                    this.$cp.addBillboard( "mubaio" + name , mubiaoPositions[name], mubiaoPic[name], name , "moveMove", this.entityLeftClick) 
                }
                
            }else{
                viewer.entities.removeById("mubaio" + name)
                // const oneDiv = window.document.getElementById(elementId)
                // oneDiv.style.display = 'none'
            }
        },
        fengxianChange(checked,city){
            const name = city.target.value;
            if(checked){
                this.openCenter()
                this.$cp.addBillboard( "fengxian" + name , fengxianPositions[name], fengxianPic[name] ,name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("fengxian" + name)
            }
        },
        yingjiChange(checked,city){
            const name = city.target.value;
            if(checked){
                this.openCenter()
                this.$cp.addBillboard( "yingji" + name , yingjiPositions[name], yingjiPic[name] , name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("yingji" + name)
            }
        },
        huanjingChange(checked,city){
            const name = city.target.value;
            if(checked){
                this.openCenter()
                this.$cp.addBillboard( "huanjing" + name , huanjingPositions[name], huanjingPic[name] , name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("huanjing" + name)
            }
        },
        yingjiwuChange(checked,city){
            const name = city.target.value;
            if(checked){
                this.openCenter()
                this.$cp.addBillboard( "yingjiwu" + name , yingjiwuPositions[name], yingjiwuPic[name], name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("yingjiwu" + name)
            }
        },
        shuiwenChange(checked,city){
            const name = city.target.value;
            if(checked){
                this.openCenter()
                this.$cp.addBillboard( "shuiwen" + name , shuiwenPositions[name], shuiwenPic[name] , name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("shuiwen" + name)
            }
        },
        huanbaoChange(checked,city){
            const name = city.target.value;
            if(checked){
                this.openCenter()
                this.$cp.addBillboard( "huanbao" + name , huanbaoPositions[name], huanbaoPic[name] , name, "moveMove", this.entityLeftClick) 
            }else{
                viewer.entities.removeById("huanbao" + name)
            }
        },
        handleXingZhengSelect(){

        },
        handleTabClick(){

        },
        entityLeftClick(entity){
            // console.log(entity)
            // this.addBoundInfoBox(entity.position._value, "gzinfoBox")
            // this.changeInfoBoxContent(entity.label.text)
            this.$cp.currentEntity = entity;
            entity.label.show=true
        },
        //点击显示详细信息
        addBoundInfoBox(positionValue, elementId) {
            const oneDiv = window.document.getElementById(elementId)
            oneDiv.style.display = 'block'
            this.preRenderListener = viewer.scene.preRender.addEventListener(function() {
                let elWidth = oneDiv.offsetWidth
                let elHeight = oneDiv.offsetHeight // + 60
                const scratch = new Cesium.Cartesian2() //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                let domPosition = positionValue
                const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(domPosition, scratch) //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
                if (Cesium.defined(canvasPosition)) {
                    // 根据元素宽高及当前点屏幕坐标进行偏移
                    var x = canvasPosition.x - (elWidth / 2);
                    var y = canvasPosition.y - elHeight*1.7;
                        oneDiv.style.transform="translate3d(" + x + 'px,' + y + "px, 0)";
                    // oneDiv.style.top = canvasPosition.y - elHeight * 1.5 + 'px'
                    // oneDiv.style.left = canvasPosition.x - elWidth / 2 + 'px'
                }
            })
        },
        //关闭广告牌
        hiddenInfoBox(event) {
                //Object.keys
                event.currentTarget.parentNode.parentNode.parentNode.parentNode.style.display = 'none'
        },
        //移除自定义信息框
        removeBoundInfoBox() {
            // // 移除元素
            // if (oldBoundInfoBox) {
            // 	oldBoundInfoBox.style.display = 'none'
            // 	oldBoundInfoBox = null
            // }
            // 移除监听事件
            if (this.preRenderListener) {
                this.preRenderListener()
                this.preRenderListener = null
            }
        },
        getCenter(){
            this.$cp.getCenter()
        }
    },
    mounted(){
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../../assets/css/varibles.styl'
    .jiben >>> .fontImg
        width:vw(16)
        height:vh(16)
        padding-right:vw(10)
        vertical-align:text-bottom
    .jiben >>> .fontWeight
        font-weight:700
        margin-top:10px
        margin-bottom:10px
        border-left: 3px solid #2893AF;
        padding-left: 17px;
        left: -20px;
    .jiben >>> .groups
        display:grid
        grid-template-columns: 1fr 1fr;
    .jiben
        color:#000
        padding:20px
        padding-top:0px;
        background :#fff;
        height:calc(100% - 55px)
</style>